<!--这是添加试卷组件-->
<template>
  <div style="width: 100%;height:100%;">
    <p class="filter" @click="close"></p>
    <div class="container">
      <div class="clearfix margin-b10">
        <div class="fl c-width45 add-topic-title">所属专题</div>
        <div class="fl c-width45 add-topic-title">继续添加</div>
        <p class="fr">
          <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
        </p>
      </div>
      <div class="topic_list clearfix" v-loading="listLoading">
        <div class="existing_list c-flex-grow1" style="padding-right:30px;">
          <div class="mt20">
            <div class="c-flex-row c-justify-sb">
              <div class="has-add-title">专题名称</div>
              <div class="c-op has-add-title">操作</div>
            </div>
            <div v-for="(item,index) in existing_list" class="c-flex-row c-justify-sb mt20">
              <div class="c-topic-name margin-r10">{{item.topicName}}</div>
              <div class="c-op c-cursor-p font-color" @click="delData(index,item)">删除</div>
            </div>
          </div>
        </div>
        <div class="continu_addList" style="width: 55%;padding-left: 30px;">
          <div class="search mt20">
            <el-input v-model="listQuery.topicName" v-on:change="input" clearable placeholder="请输入专题名称" @keyup.enter.native="searchTopics"
                      style="width: 250px;"></el-input>
            <el-button class="search" type="success" icon="el-icon-search" @click="searchTopics">搜索</el-button>
          </div>
          <div v-for="(item,index) in result_list" :key=item.id class="c-flex-row c-justify-sb mt20">
            <div class="c-topic-name margin-r10" :class="{color: item.btn=='已添加'}">{{item.topicName}}</div>
            <button class="add-btn c-cursor-p border0" :disabled="item.btn=='已添加'" :class="{addBtnDisabled: item.btn=='已添加'}"
                    @click="add(index)">{{item.btn}}
            </button>
          </div>
        </div>
      </div>
      <div class="btn mt20" style="text-align:center;">
        <el-button type="primary" icon="el-icon-check" @click="dataSubmit">保存</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { toGetAllTopic, toSaveIdArr } from '@/api/paper'
  export default {
    props: [
      'paperId'
    ],
    components: {},
    created() {
      this.toGetpicList()
    },
    data() {
      return {
        existing_list: [
          { topicName: '2018年初一下学期化学测试', id: 8, btn: '已添加' },
          { topicName: '2018年初一下学期化学测试', id: 9, btn: '已添加' }
        ],
        continu_addList: [
          { topicName: '2018年初一下学期化学测试', id: 8, btn: '已添加' }
        ],
        result_list: [
          { topicName: '2018年初一下学期化学测试', id: 8, btn: '已添加' }
        ],
        topicList: [],
        checkList: [],
        listQuery: {
          topicName: null,
          paperId: null
        },
        selectTopicNum: 0,
        listLoading: false,
        number: 0,
        topicIdArr: []
      }
    },
    methods: {
      toGetpicList() {
        toGetAllTopic(this.paperId).then(res => {
          this.listLoading = true
          console.log('返回值为:', res.data.data.optionArr)
            this.existing_list = res.data.data.optionArr
            this.continu_addList = res.data.data.topicList
            this.result_list = res.data.data.topicList
            setTimeout(() => {
              this.listLoading = false
            }, 1000)
        }).catch(err => {
          console.log('1111')
          console.log(err)
        })
      },
      dataSubmit() {
        this.topicIdArr = { 'topicArr': this.existing_list, 'paperId': this.paperId }
        console.log('这是选择的专题数组：', this.topicIdArr)
        toSaveIdArr(this.topicIdArr)
          .then(res => {
          // 正确回调
            this.$message({
              type: 'success',
              message: ' 保存成功! '
            })
            this.toGetpicList()
          })
          .catch(err => {
            console.log(err)
          })
        this.$emit('hideAddTopic', false)
      },
      delData(index, item) {
        this.existing_list.splice(index, 1)
        for (var j = 0; j < this.result_list.length; j++) {
          if (this.result_list[j].id == item.id) {
            this.result_list[j].btn = '添加'
            break
          }
        }
        for (var i = 0; i < this.continu_addList.length; i++) {
          if (this.continu_addList[i].id == item.id) {
            this.continu_addList[i].btn = '添加'
            break
          }
        }
      },
      input() {

      },
      searchTopics() {
        var arr = []
        var value = this.listQuery.topicName
        for (var i = 0; i < this.continu_addList.length; i++) {
          var item = this.continu_addList[i]
          if (item.topicName.indexOf(value) >= 0) {
            arr.push(item)
          }
        }
        this.result_list = arr
        // this.toGetpicList()
      },
      add(index) {
        var item = this.result_list[index]
        item.btn = '已添加'
        for (var i = 0; i < this.continu_addList.length; i++) {
          if (item.id == this.continu_addList[i].id) {
            this.continu_addList[i].btn = '已添加'
            break
          }
        }
        this.existing_list.push(item)
      },
      close() {
        this.result_list = this.continu_addList
        this.$emit('hideAddTopic', false)
      }
    },
    watch: {
      paperId: {
        handler: function(val, oldval) {
          if (val != oldval) {
            this.toGetpicList()
            this.listQuery.topicName = ''
          }
        }
      },
      checkList: {
        handler: function(val, oldval) {
          this.number = val.length
        }
      }
    }

  }
</script>
<style scoped>
  .container {
    width: 900px;
    height: 500px;
    padding: 20px;
    background: #fff;
    position: fixed;
    left: 15%;
    top: 15%;
    z-index: 9999990;

  }
.topic_list {
  padding: 0 20px;
  /*width: 880px;*/
  height: 380px;
  overflow-y: auto;
}
  .mt20 {
    margin-top: 20px;
  }

  .color {
    color: #ccc !important;
  }

  .font-color {
    color: #00a3ff;
  }

  h3, p {
    margin: 0;
  }

  .fixTitle {
    width: 600px;
  }

  .addBox {
    width: 600px;
    height: 400px;
    overflow: auto;
    background: #fff;
    position: fixed;
    left: 30%;
    top: 15%;
    z-index: 120;
  }

  .el-checkbox {
    margin-left: 0 !important;
  }

  .el-checkbox b {
    font-weight: 500;
    font-size: 14px;
  }
  .add-topic-title {
    font-size: 18px;
    font-weight: bold;
  }
  .c-width45 {
    width:45%;
  }
  .has-add-title {
    font-weight: bold;
    color: #666;
  }
  .existing_list {
    float: left;
    width: 45%;
  }
  .continu_addList {
    float: left;
    width: 50%;
    border-left:1px solid #ccc;
  }
  .c-op {
    width: 40px;
    flex-shrink:0;
    -webkit-flex-shrink:0;
  }
  .c-topic-name {
    font-size: 14px;
    color: #666;
  }
  .add-btn {
  	font-size: 12px;
  	color: #fff;
    width: 60px;
    height: 24px;
    line-height: 24px;
    border-radius: 6px;
    background: #f56c6c;
    flex-shrink:0;
    -webkit-flex-shrink:0;
  }
  .addBtnDisabled{
    background: #909399;
  }
</style>
